<template>
  <div>
    detail
    <button @click="goBack">点我返回</button>
    <p>电影id{{mid}}</p>
    <hr>
    <h3>猜你喜欢</h3>
    <p @click="goLike">功夫</p>
  </div>
</template>

<script setup>
import {onBeforeRouteLeave, useRoute, useRouter,onBeforeRouteUpdate} from 'vue-router'
import {onMounted,ref,watch} from "vue";

let mid = ref('')
// 所以我们不能再直接访问 this.$router 或 this.$route。作为替代，我们使用 useRouter 和 useRoute 函数：
let router = useRouter()
let route = useRoute()

onMounted(()=>{
   mid.value = route.params.mid // 获取动态id
})

function goBack(){
  // router.back() // 返回
  router.go(-1)
  // // 前进一个页面
  // router.forward()
  // router.go(1)
}

function goLike(){
  router.push('/detail/6789')
}

// watch 监听
watch(()=> route.params,(newValue,oldValue)=>{
    console.log('新电影的id',newValue.mid,route.params.mid) // 新电影的id 6789 6789
})

// 或者用
onBeforeRouteUpdate((to,from)=>{
  console.log('新电影的id',to.params.mid) // 新电影的id 6789 6789
})

// onBeforeRouteLeave((to, from) => {
//   const answer = window.confirm(
//       'Do you really want to leave? you have unsaved changes!'
//   )
//   // 取消导航并停留在同一页面上
//   if (!answer) return false
// })

</script>

<style scoped>

</style>
